<!DOCTYPE html>
<html>

<head>
<title>HTML5 Slideshow</title>


<style type="text/css"> 


#Pictures {
   
   
   z-index:1;
	width:300px;
	height:150px;
	position:absolute;
	top:50px;
	
    
   }

#PicContainer {
	
	
	z-index:1;
	position:absolute;
	left:50%;
	width:800px;
	margin-left:-400px;
	height:300px;
	border-style:solid;
	border-color:gray;
	border-width:1px;
	top:300px;
	overflow:hidden;
	
}


#Frame {
  
  position:absolute;
  top:305px; 
  left:50%;
  margin-left:-400px;
  width:800px;
  z-index:6;

}

</style>


<script type="text/javascript">

PicNumber = 5;
Stepborder = 0;
var k = 100;
var s = 100;
var Steps = new Array();




for (i=0;i<PicNumber;i++)
   {
   Steps[i] = s;
   s = s + 350;  
   }


function init () {

   for (i=0;i<PicNumber;i++)
   {
   var PicCont = document.getElementById("PicContainer");
   var Pics = PicCont.getElementsByTagName("img")[i].style.left = k+"px";
   k = k + 350;
   
   }
}




function MoveRight ()
{

     

        if (Stepborder <=200)
        {
         
         
           var PicCont = document.getElementById("PicContainer");
           
              for (i=0;i<PicNumber;i++)
              {
               Pic1 = PicCont.getElementsByTagName("img")[i].style.left = Steps[i]+"px"; //Steps Array für verschiedene Pos der Bilder
                     
               Steps[i] = Steps[i] + 1;  
              }
              
       
       Timer = setTimeout("MoveRight()", 3);  
       Stepborder++;     
        }
       
               if (Stepborder == 200)
               {
               Stepborder = 0;
               clearTimeout (Timer);
               }              
}
       
      

function MoveLeft ()
{

     

        if (Stepborder <=200)
        {
         
         
           var PicCont = document.getElementById("PicContainer");
           
               for (i=0;i<PicNumber;i++)
              {
              Pic1 = PicCont.getElementsByTagName("img")[i].style.left = Steps[i]+"px"; //Steps Array für verschiedene Pos der Bilder
                     
              Steps[i] = Steps[i] - 1;  
              }
                                                                             
                     
       Timer = setTimeout("MoveLeft()", 3);  
       Stepborder++;     
        }
       
               if (Stepborder == 200)
               {
               Stepborder = 0;
               clearTimeout (Timer);
               }              
}


function Wheel () {

if (event.wheelDelta>0)
{
MoveRight();
}

else
{
MoveLeft();
}


}


</script>





</head>

<body onload="init()" onmousewheel="Wheel()"  >



<div  id='PicContainer'>

<img  id='Pictures' src='Marissa Miller/1.jpg' />
<img  id='Pictures' src='Marissa Miller/2.jpg' />
<img  id='Pictures' src='Marissa Miller/3.jpg' />
<img  id='Pictures' src='Marissa Miller/4.jpg' />
<img  id='Pictures' src='Marissa Miller/5.jpg' />

</div>



<a id="Next" href="#" onclick="MoveRight()">
<img style=" z-index:4; position:absolute; left:55%; top:550px; width:30px; height:30px;" src="Marissa Miller/Next.png" />
</a>

<a id="Previous" href="#" onclick="MoveLeft()">
<img style=" z-index:4; position:absolute; left:45%; top:550px; width:30px; height:30px;" src="Marissa Miller/Previous.png" />
</a>




</body>

</html>
